<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=map-usa
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/bootstrap@4/dist/css/bootstrap.min.css"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="../css/viewer.css" />
  </head>
  <body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <ul id="images" style="display: none">
      <li><img src="../images/tibet-1.jpg" alt="Picture 1" /></li>
      <li><img src="../images/1.jpg" alt="Picture 1" /></li>
      <li><img src="../images/1.png" alt="Picture 1" /></li>
      <li><img src="../images/2.jpg" alt="Picture 1" /></li>
    </ul>
    <script
      type="text/javascript"
      src="https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"
    ></script>
    <script
      src="https://unpkg.com/bootstrap@4/dist/js/bootstrap.bundle.min.js"
      crossorigin="anonymous"
    ></script>
    <script src="../js/viewer.js"></script>

    <script type="text/javascript">
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      var app = {};
      var option;
      const data =  [
                { name: "青海", value: 3 },
                { name: "陕西", value: 9 },
                { name: "甘肃", value: 1 },
                { name: "湖北", value: 4 },
                { name: "河南", value: 1 },
                { name: "新疆", value: 4 },
                { name: "山西", value: 2 },
                { name: "宁夏", value: 14 },
                { name: "吉林", value: 1 },
                { name: "内蒙古", value: 1 },
              ]

      var geoCoordMap = {
        陕西:[108.948024, 34.263161],
        青海:[96.778916, 35.623178],
        甘肃: [103.823557, 36.058039],
        湖北: [113.298572, 30.684355],
        河南:[113.665412, 33.757975],
        新疆:[85.617733, 40.792818],
        山西:[111.849248, 36.857014],
        宁夏:[106.278179, 37.26637],
        吉林:[125.3245, 43.886841],
        内蒙古:[111.670801, 41.818311],
      };

      function convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      }

      myChart.showLoading();
      $.get("./china-geo.json", function (usaJson) {
        myChart.hideLoading();
        echarts.registerMap("china", usaJson);
        option = {
          title: {
            text: "固本然全国产业布局图",
            left: "center",
          },
          tooltip: {
            trigger: "item",
            // showDelay: 0,
            // transitionDuration: 0.2,
          },
          visualMap: {
            left: "right",
            min: 1,
            max: 15,
            inRange: {
              color: [
                // "#313695",
                // "#4575b4",
                // "#74add1",
                // "#abd9e9",
                // "#e0f3f8",
                // "#ffffbf",
                // "#fee090",
                // "#fdae61",
                // "#f46d43",
                // "#d73027",
                // "#a50026",
              ],
            },
            text: ["High", "Low"],
            // calculable: true,
            realtime: false,
          },
          // toolbox: {
          //   show: true,
          //   //orient: 'vertical',
          //   left: "left",
          //   top: "top",
          //   feature: {
          //     dataView: { readOnly: false },
          //     restore: {},
          //     saveAsImage: {},
          //   },
          // },
          series: [
            {
              name: "图片数量",
              type: "map",
              map: "china",
              label: {
                show: true,
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
              data: data
            },
            {
              type: "scatter",
              coordinateSystem: "geo",
              data: convertData(data),
              symbolSize: [48, 48],
              zlevel: 3,
              symbol: `image://./flag.png`,
              label: {
                show: false,
              },
              itemStyle: {
                normal: {
                  color: "#F06C00",
                },
              },
            },
          ],
        };
        myChart.setOption(option);
      });

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }

      // 监听地图点击事件
      myChart.on("click", function (params) {
        if (params.componentType === "series" && params.seriesType === "map") {
          // alert("你点击了：" + params.name);
          console.log("你点击了：" + params.name + "图片数量:" + params.value);
          // 你可以在这里添加更多逻辑，比如导航到详情页
          // window.location.href = '/details?region=' + encodeURIComponent(params.name);
          previewImg();
        }
      });

      window.addEventListener("resize", myChart.resize);

      function previewImg() {
        var viewer = new Viewer(document.getElementById("images"), {
          button: false, // 右上角关闭按钮
          title: false, // 标题
          toolbar: {
            oneToOne: true,
            oneToOne: "large",
            prev: "large",
            // prev: function () {
            //   viewer.prev(true);
            // },
            // play: true,
            next: "large",
            // next: function () {
            //   viewer.next(true);
            // },
          },

          hidden: function () {
            viewer.destroy();
          },
        });
        viewer.show();
      }

      // image.click();
    </script>
  </body>
</html>
